<template>
  <!--  -->
  <div>
    <picker
      mode="multiSelector"
      @columnchange="columnchange"
      @change="change"
      :value="pickerValue"
      :range="range"
    >
      <slot></slot>
    </picker>
  </div>
</template>

<script>
import tool from "./tool";

export default {
  props: {
    currentTime: {
      default: "",
    },
    modelValue: {
      default: "",
    },
  },
  data() {
    return {
      timeList: [],
      dateList: [],
      pickerValue: [0, 0],
    };
  },
  computed: {
    range() {
      if (!this.dateList.length) {
        return [[], []];
      } else {
        let date = this.dateList.map((item) => item.date);
        let time = this.dateList[this.pickerValue[0]].time;
        return [date, time];
      }
    },
  },
  mounted() {
    this.initTimeList();
    this.initTime();
  },
  methods: {
    initTimeList() {
      for (let i = 0; i < 24; i++) {
        for (let j = 0; j < 2; j++) {
          let arr = ["00", "30"];

          let h = (i + "").padStart(2, "0");
          this.timeList.push({
            time: `${h}:${arr[j]}`,
            step: i * 60 + parseInt(arr[j]),
          });
        }
      }
    },
    initTime() {
      let currentTime = "";
      if (this.currentTime) {
        currentTime = new Date(this.currentTime);
      } else {
        currentTime = new Date();
      }

      //年
      let year = currentTime.getFullYear();
      //月
      let M = currentTime.getMonth() + 1;
      //日
      let D = currentTime.getDate();

      //时
      let hour = currentTime.getHours();

      //分
      let min = currentTime.getMinutes();

      //当前天数无法并入,取第二天开始时间
      if (hour >= 23 && min >= 30) {
        let startTime = this.getDayTime(`${year}-${M}-${D}`, 1);
        for (let i = 0; i < 7; i++) {
          this.dateList.push({
            date: this.getDayTime(startTime, i),
            time: this.timeList.map((item) => item.time),
          });
        }
      } else {
        let step = hour * 60 + min;
        let currentTimeList = [];
        this.timeList.forEach((item) => {
          if (item.step > step) {
            currentTimeList.push(item.time);
          }
        });

        this.dateList.push({
          date: this.getDayTime(currentTime, 0),
          time: currentTimeList,
        });

        for (let i = 1; i < 7; i++) {
          this.dateList.push({
            date: this.getDayTime(currentTime, i),
            time: this.timeList.map((item) => item.time),
          });
        }
      }
    },
    getDayTime(time, day) {
      let oneDay = 1000 * 60 * 60 * 24 * day;
      let current = 0;
      if (time) {
        current = tool.getCustomTime(time, "timestamp");
      } else {
        current = Date.now();
      }

      return tool.getCustomTime(current + oneDay, "YYYY/MM/DD");
    },
    columnchange(data) {
      if (data.detail.column == 0) {
        let time = this.range[1][this.pickerValue[1]];
        this.pickerValue[0] = data.detail.value;

        let nextList = this.range[1];

        let index = nextList.findIndex((item) => item == time);
        if (index == -1) {
          this.pickerValue[1] = 0;
        } else {
          this.pickerValue[1] = index;
        }
      }
      if (data.detail.column == 1) {
        this.pickerValue[1] = data.detail.value;
      }
    },
    change(data) {
      console.log(data);
      let arr = data.detail.value;
      let date = this.range[0][arr[0]];
      let time = this.range[1][arr[1]];
      this.$emit("update:modelValue", `${date} ${time}`);
    },
  },
};
</script>
<style lang="scss" scoped></style>
